<script setup>
import { ref, onMounted } from 'vue'
import TopNavation from '../components/TopNavation.vue'
import instenceWords from '../utils/request.js'
import ComplexTable from '../components/ComplexTable.vue'
import RotatingChart from '../components/RotatingChart.vue'
import GlobalPlugins from '../components/GlobalPlugins.vue'
import chart1 from '../assets/chat1.png'
import chart2 from '../assets/chat2.png'
import chart3 from '../assets/chat3.png'

const Words = ref('哈哈哈哈哈')

// 初始化数据
const tableData = ref([
  { id: 1, name: 'Alice', age: 25, email: 'alice@example.com' },
  { id: 2, name: 'Bob', age: 30, email: 'bob@example.com' },
  { id: 3, name: 'Charlie', age: 28, email: 'charlie@example.com' },
])

// 列配置
const columns = ref([
  { key: 'id', label: 'ID', fixed: 'left', width: '15%' },
  {
    key: 'name',
    label: '姓名',
    editable: true,
    filterable: true,
    type: 'text',
    width: '30%',
  },
  {
    key: 'age',
    label: '年龄',
    filterable: true,
    type: 'number',
    width: '15%',
  },
  { key: 'email', label: '邮箱', fixed: 'right', width: '40%' },
])

// 菜单项
const menuItems = ref([
  { label: '首页', path: '/' },
  {
    label: '学部概况',
    children: ['功能信息', '人才培养', '特色教学'],
  },
  {
    label: '招生信息',
    children: ['招生政策', '报名流程', '常见问题'],
  },
  {
    label: '教育教学',
    children: ['招生政策', '报名流程', '常见问题'],
  },
  {
    label: '师资队伍',
    children: ['招生政策', '报名流程', '常见问题'],
  },
  {
    label: '人才招聘',
    path: '/home/detail',
  },
  {
    label: '学生园地',
    children: ['招生政策', '报名流程', '常见问题'],
  },
  {
    label: '科学研究',
    children: ['招生政策', '报名流程', '常见问题'],
  },
  {
    label: '国际交流',
    children: ['招生政策', '报名流程', '常见问题'],
  },
  {
    label: '党建工会',
    children: ['招生政策', '报名流程', '常见问题'],
  },
  {
    label: '社会服务',
    children: ['招生政策', '报名流程', '常见问题'],
  },
])

// 轮播图数据
const rotatingImages = ref([
  { image: chart1, content: '遥感科学与技术' },
  { image: chart2, content: '学生党支部颁奖' },
  { image: chart3, content: '学部老师走间穿行' },
])
// 数据更新事件
const handleDataUpdate = (newData) => {
  tableData.value = newData
}

// 列配置更新事件
const handleColumnsUpdate = (newColumns) => {
  columns.value = newColumns
}

const getWords = async () => {
  try {
    const res = await instenceWords.get('/api/rand.qinghua?format=json')
    console.log('ss: ', res)
    Words.value = res.data.content
  } catch (err) {
    console.log(err.message)
  }
}

onMounted(() => {
  getWords()
})
</script>

<template>
  <TopNavation :mainMenuItems="menuItems" class="nav-container" />
  <RotatingChart :images="rotatingImages" class="RotatingChart" />
  <div class="table-container">
    <h2>Complex Table</h2>
    <complex-table
      :data="tableData"
      :columns="columns"
      @update:data="handleDataUpdate"
      @update:columns="handleColumnsUpdate"
    />

    <h1>{{ Words }}</h1>
  </div>

  <div class="Grid-container">
    <div class="col-sm-6 col-md-5">
      <h2>新闻中心</h2>
      <pre></pre>
      <ul>
        <li v-for="(item, index) in menuItems" :key="index">
          {{ item.label }}
        </li>
      </ul>
    </div>
    <div class="col-sm-6 col-md-4">
      <h2>通知公告</h2>
      <pre></pre>
      <ul>
        <li v-for="(item, index) in menuItems" :key="index">
          {{ item.label }}
        </li>
      </ul>
    </div>
    <div class="col-sm-6 col-md-3">
      <h2>平台建设</h2>
      <pre></pre>
      <ul>
        <li v-for="(item, index) in menuItems" :key="index">
          {{ item.label }}
        </li>
      </ul>
    </div>
  </div>

  <div class="Vip-container">
    <div class="vip-header"></div>
    <div class="vip-body"></div>
    <div class="vip-footer"></div>
  </div>

  <globalPlugins />
</template>

<style lang="css" scoped>
.RotatingChart {
  margin-top: 80px !important;
}

h1,
.table-container {
  background-color: var(--bgc-table);
}

h1,
h2,
li {
  color: var(--text-color);
}

.col-md-5,
.col-md-4,
.col-md-3 {
  border: 1px solid var(--border-color);
  background-color: var(--bg-color);
}

.Vip-container {
  width: 244px;
  height: 488px;
  background-color: var(--bg-color);
  border-radius: 10px;
}

.vip-header {
  height: 83.5px;
  background-image: url('../assets/vip.png');
  background-position: 0 0;
  background-size: 100% 584.4%;
  border: 1px solid var(--border-color);
}
.vip-body {
  height: 318.5px;
  background-image: url('../assets/vip.png');
  background-position: 0 38%;
  background-size: 100% 200%;
  border: 1px solid var(--border-color);
  margin-top: 10px;
}
</style>
